<template>
    <div>
<!--        顶部导航栏-->
        <nav-bar class="login">
            <template slot="center">登录bilibili</template>
            <template slot="right">
                <div @click="$router.push('/register')">注册
                    <van-icon class="icon" name="arrow" />
                </div>
            </template>
        </nav-bar>
<!--        输入框-->
        <login-text class="input" label="账号" placeholder="请输入账号"
                    rule="^[a-zA-Z][a-zA-Z0-9_]{4,15}$"
                    @inputChange="res => username=res"></login-text>
        <login-text label="密码" placeholder="请输入密码"
                    type="password" rule="^[A-Za-z0-9]{6,16}$"
                    @inputChange="res => password=res"></login-text>
<!--按钮-->
        <login-button label="登录" @commitLogin="commitLogin"></login-button>

    </div>
</template>

<script>
    import NavBar from 'components/common/Login/LoginNav'
    import LoginText from 'components/common/Login/LoginText'
    import LoginButton from 'components/common/Login/LoginButton'
    export default {
        data(){
            return{
                username:'',
                password:'',
            }
        },
        components:{
            NavBar,
            LoginText,
            LoginButton
        },
        methods:{
            async commitLogin(){
                if (this.username && this.password){
                    const {data:res} = await this.$http.post('/login',{
                        username:this.username,
                        password:this.password
                    })
                    console.log(res);
                    if (res.code !== 200) return this.$toast.fail(res.msg)
                    this.$toast.success(res.msg)
                    localStorage.setItem('id',res.id)
                    localStorage.setItem('token',res.token)
                    setTimeout(() => {
                        this.$router.push('/userInfo')
                    },1000)

                } else {
                    this.$dialog.alert({
                        message:'提交失败，请输入正确格式'
                    })

                }
            }
        }
    }
</script>

<style scoped>
    .login{
        margin-bottom: 6.452vw;
    }
</style>